<template>
    <div class="container">
        <div class="header">
            <van-icon name="arrow-left" @click="back" class="header-left" size="30" />
            订单详情
        </div>
        <stateBar :item="stateMap[detailData.trade_state]" />
        <div class="tips">
            <div class="dzf" v-if="detailData.trade_state === '待支付'">
                <div class="text1">订单未支付</div>
                <div class="text2">请在
                    <counter :second="second" />
                    内完成支付，超时订单将自动取消
                </div>

            </div>
            <div class="dzf" v-if="detailData.trade_state === '待服务'">
                <div class="text1">订单已提交，请耐心等待服务人员接单</div>
            </div>
            <div class="dzf" v-if="detailData.trade_state === '已完成'">
                <div class="text1">服务已完成</div>
            </div>
            <div class="dzf" v-if="detailData.trade_state === '已取消'">
                <div class="text1">订单已取消</div>
                <div class="text2">期待下次为您服务，如需帮助可联系客服</div>
            </div>
            <div class="text3">
                <van-button type="success" @click="showPay = true">
                    立即支付
                </van-button>
            </div>

        </div>

        <van-cell-group title="订单信息" class="card">
            <div class="header-text">预约信息</div>
            <van-cell v-for="(item,key) in makeInfo" 
            :key="key"
            :title="item"
            :value="formatData(key)">
        </van-cell>

        
        </van-cell-group>
        <van-cell-group title="预约信息" class="card">
            <div class="header-text">订单信息</div>"
            <van-cell v-for="(item,key) in orderInfo" 
            :key="key"
            :title="item"
            :value="formatData(key)">
        </van-cell>
        </van-cell-group>

        <van-dialog v-model:show="showPay">
            <van-icon name="cross" class="close" @click="closePay"></van-icon>
            <div>微信支付</div>
            <van-image width="150px" height="150px" :src="codeImg"></van-image>
            <div>请使用微信扫码支付</div>
        </van-dialog>

    </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import stateBar from '../components/stateBar.vue';
import counter from '../components/counter.vue';
import Qrcode from 'qrcode'

const { proxy } = getCurrentInstance()

const detailData = reactive({})

const stateMap = {
    '待支付': 10,
    '待服务': 20,
    '已完成': 30,
    '已取消': 40,
}

const second = computed(() => {
    return detailData.order_start_time ? detailData.order_start_time + 7200000 - Date.now() : 0
})


onMounted(async () => {
    const { data } = await proxy.$api.orderDetail({ oid: route.query.oid });
    Object.assign(detailData, data.data)
    Qrcode.toDataURL(detailData.code_url).then(url => {
        codeImg.value = url
    })
    console.log(makeInfo,'makeInfo')
    console.log(orderInfo,'orderInfo')
})

const router = useRouter();
const route = useRoute();

// 支付弹窗
const showPay = ref(false)
const codeImg = ref('')


const closePay = () => {
    showPay.value = false
    router.push('/order')
}


const back = () => {
    router.go(-1);
}


const makeInfo = {
    service_name: '预约服务',
    hospital_name:'就诊医院',
    starttime: '预约时间',
    'client.name': '就诊人',
    'client.mobile': '手机号码',
    receiveAddress: '接送地址',
    demand: '预约需求'
}

const orderInfo = {
    tel: '手机号码',
    order_start_time: '预约时间',
    price:'应付金额',
    out_trade_no:'订单编号'
}

const formatData = (key) => {
  if (key.indexOf(".") === -1) {
    if (key === "order_start_time") {
      return formatTimestamp(detailData[key]);
    }
    return detailData[key];
  }
  let arr = key.split(".").reduce((o, p) => {
    return (o || {})[p];
  }, detailData);
  return arr;
}
function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要+1
  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}

</script>
<style lang="less" scoped>
.container {
    background-color: #f0f0f0;
    height: 100vh;
}

.header {
    background-color: #fff;
    line-height: 40px;
    text-align: center;

    .header-left {
        float: left;
    }
}

.card {
    margin: 15px 0;
    padding: 10px;

    .header-text {
        padding-left: 5px;
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
        border-left: 4px solid red;
    }
}

.dzf {
    padding: 20px;

    .text1 {
        font-size: 20px;
        font-weight: bold;
        line-height: 30px;
        color: #666;
    }

    .text2 {
        font-size: 14px;
        color: #666;
    }

    .text3 {
        text-align: center;


    }


}

.van-button {
    text-align: center;
    margin-top: 10px;
    width: 80%;
    font-weight: bold;
    margin: 10px auto;
    display: block
}

::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
        position: absolute;
        left: 20px;
    }
}
</style>